<template>
  <div v-loading="loading" class="role-resource">
    <div class="perm-container">
      <el-form ref="form" label-width="150px" label-position="left">
        <div
          :class="!$store.getters.banBtnList.includes('BTN_ROLE_EDIT')?'role-box':'role-box-disable'"
        >
          <el-scrollbar style="height:100%" class="hid-scrollbar-x">
            <div class="title">选择权限</div>
            <el-form-item class="perm-title" label="操作对象">
              <!-- <span class="perm-title-value">权限</span> -->
              <div class="flexRBC">
                <span class="check-left perm-title-value">权限</span>
                <div class="check-right">
                  <el-checkbox
                    v-model="allPermission"
                    :disabled="$store.getters.banBtnList.includes('BTN_ROLE_EDIT')"
                    @change="handleChange"
                  >全部权限</el-checkbox>
                </div>
              </div>
            </el-form-item>
            <!-- <el-checkbox-group
              :disabled="allPermission||$store.getters.banBtnList.includes('BTN_ROLE_EDIT')"
              v-model="permList"
            >-->
            <el-form-item
              v-for="(group,index) in groupList"
              :key="group.groupId"
              :label="group.groupName"
            >
              <div class="flexRBC">
                <div class="check-left">
                  <div class="check-group">
                    <el-checkbox
                      v-for="perm in group.permInfos"
                      :key="perm.id"
                      v-model="permList"
                      class="check-item"
                      :disabled="allPermission||$store.getters.banBtnList.includes('BTN_ROLE_EDIT')"
                      :label="perm.id"
                    >{{ perm.name }}</el-checkbox>
                  </div>
                </div>
                <div class="check-right">
                  <el-checkbox
                    v-model="currentChecked[index].checked"
                    :disabled="allPermission||$store.getters.banBtnList.includes('BTN_ROLE_EDIT')"
                    @change="currentCheckedChange(index)"
                  >全选</el-checkbox>
                </div>
              </div>
            </el-form-item>
            <!-- </el-checkbox-group> -->
          </el-scrollbar>
        </div>

        <el-form-item v-if="!$store.getters.banBtnList.includes('BTN_ROLE_EDIT')">
          <el-button size="small" round type="primary" @click="handleSave">保 存</el-button>
          <el-button size="small" round @click="handleReset">重 置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { getRolePerms, updateRolePerms } from '@/api/role'

export default {
  props: {
    scope: {
      type: Number,
      require: true,
      default: 0
    }
  },

  data() {
    return {
      resolve: null,
      reject: null,
      loading: false,
      visible: null,
      roleId: null,
      allPermission: null, // 是否所有全选
      permList: [], //  当前选择
      tempPermList: [], // 不是全选状态选择
      groupList: [], // 所有权限选项
      allPermList: [], // 所有权限选项id集合
      currentChecked: []
    }
  },
  mounted() {},
  methods: {
    /**
       * 获取数据
       */
    // 获取权限
    getRole(roleId) {
      this.loading = true
      this.currentChecked = []
      this.groupList = []
      getRolePerms(roleId)
        .then(res => {
          if (res.code === 0) {
            this.permList = res.data.permList
            const groupList = res.data.groupPermInfos
              ? res.data.groupPermInfos
              : []
            this.allPermission = res.data.allPermission
            let allPermList = []
            for (const group in groupList) {
              const permInfos = groupList[group].permInfos
              const ids = permInfos.map(item => item.id)
              allPermList = allPermList.concat(ids)
              this.currentChecked.push({ checked: false, ids: ids })
            }
            this.groupList = groupList
            this.allPermList = allPermList
            if (this.allPermission) {
              this.tempPermList = this.permList
              this.permList = allPermList
            }
          }
        })
        .finally(() => {
          this.loading = false
        })
    },

    open(roleId) {
      return new Promise((resolve, reject) => {
        this.resolve = resolve
        this.reject = reject
        this.visible = true
        this.roleId = roleId
        this.getRole(roleId)
      })
    },

    hide() {
      this.resolve = null
      this.reject = null
    },

    handleChange() {
      if (this.allPermission) {
        this.tempPermList = this.permList
        this.permList = this.allPermList
      } else {
        this.permList = this.tempPermList
      }
    },

    handleReset() {
      this.getRole(this.roleId)
    },

    handleSave() {
      const data = {
        id: this.roleId,
        allPermission: this.allPermission,
        permList: this.permList
      }

      this.loading = true
      updateRolePerms(data)
        .then(resp => {
          this.loading = false
          if (resp.code === 0) {
            this.$notify({
              title: '成功',
              message: '保存成功',
              type: 'success',
              duration: 2000
            })
            this.resolve && this.resolve()
            this.close()
          }
        })
        .catch(() => {})
        .finally(() => {
          this.loading = false
        })
    },

    /**
       * 状态组
       */
    // 列全选变更
    currentCheckedChange(index) {
      const flag = this.currentChecked[index].checked
      const ids = this.currentChecked[index].ids
      console.log(flag, ids)
      if (flag) {
        this.permList = [...new Set(this.permList.concat(ids))]
      } else {
        const a = this.permList
        const b = ids
        const c = []
        a.forEach(v => {
          if (b.indexOf(v) === -1) c.push(v)
        })
        this.permList = c
      }
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  .perm-container {
    // padding:10px 0;
    .title {
      padding-left: 10px;
      height: 40px;
      line-height: 40px;
    }
    .role-box {
      height: calc(100vh - 220px);
    }
    .role-box-disable {
      height: calc(100vh - 160px);
    }
  }
  .perm-title {
    padding-bottom: 0 !important;
  }

  .perm-title-value {
    color: #999 !important;
  }

  .el-form-item {
    margin-bottom: 0;
    padding: 10px 10px 10px 10px;
    border-bottom: 1px solid #e7e7e7;
  }
  .el-form-item:last-child {
    border-bottom: none;
  }

  .el-form-item ::v-deep .el-form-item__label {
    color: #333 !important;
    font-weight: normal;
  }

  .perm-title ::v-deep .el-form-item__label {
    color: #999 !important;
  }

  .el-form-item ::v-deep .el-checkbox__label {
    color: #666;
  }

  // .el-checkbox-group {
  .el-checkbox,
  .el-checkbox + .el-checkbox {
    margin-left: 0;
    margin-right: 20px;
  }
  // }

  .check-group {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .check-left {
    flex: 1 1 auto;
    .el-checkbox {
      margin-left: 0;
      margin-right: 20px;
    }
  }
  .check-right {
    display: flex;
    flex: 0 0 auto;
    width: 100px;
    .el-checkbox {
      margin-left: 0;
      margin-right: 0;
    }
  }
  .check-item {
    min-width: 160px;
  }
</style>

